<script lang="ts" setup>
import { computed, reactive } from "vue";
import { useStore } from "@/store";

const store = useStore();
const roomDetail = computed(() => store.state.roomDetail);
const orderForm = reactive({
  personNumber: 1
});

function submitForm() {
  // TODO 提交事件
}
</script>
<template>
  <div v-if="roomDetail && roomDetail.info && roomDetail.owner">
    <!-- 照片墙 -->
    <el-carousel
        v-if="roomDetail.imgs && roomDetail.imgs.length"
        class="imgs-wall"
        trigger="click"
        height="380px"
        :interval="3000"
        indicator-position="none"
        type="card"
    >
      <el-carousel-item
          v-for="(item, index) in roomDetail.imgs"
          :key="index"
      >
        <img :src="item" :alt="index" />
      </el-carousel-item>
    </el-carousel>
    <!-- 房屋详情信息 -->
    <div class="room-detail">
      <div class="detail-part">
        <h2>{{ roomDetail.title }}</h2>
        <div class="info">
          <span class="room">{{ roomDetail.info.room }}间卧室</span>
          <span class="bed">{{ roomDetail.info.bed }}张床</span>
          <span class="toilet">{{ roomDetail.info.toile }}个洗手间</span>
          <span class="live-number">入住{{ roomDetail.info.liveNumber }}个人</span>
        </div>
        <div class="tags">
          <el-tag size="small" typ="danger">{{ roomDetail.info.remarks }}条评论</el-tag>
          <el-tag size="small" class="ml-10" typ="danger" v-if="roomDetail.info.metro">靠近地铁</el-tag>
          <el-tag size="small" class="ml-10" typ="warning" v-if="roomDetail.info.parking">免费停车</el-tag>
          <el-tag size="small" class="ml-10" typ="success" v-if="roomDetail.info.luggage">可存放行李</el-tag>
        </div>
        <!-- 房东信息 -->
        <div class="owner-detail">
          <img :src="roomDetail.owner.avatar" alt="" />
          <div class="info">
            <p>房东：{{ roomDetail.owner.name }}</p>
            <p>
              <span v-if="roomDetail.owner.certify">已验证身份</span>
              <span v-if="roomDetail.owner.goodOwner">超赞房东</span>
            </p>
          </div>
        </div>
        <!-- 房屋基本介绍 -->
        <div class="introduce">{{ roomDetail.owner.introduce }}</div>
      </div>
      <div class="form-part">
        <p class="price">
          <span>￥{{ roomDetail.price }}</span> / 晚
        </p>
        <!-- 表单 -->
        <el-form ref="orderForm" :model="orderForm">
          <el-form-item prop="personNumber" label="人数">
            <select v-model="orderForm.personNumber">
              <option v-for="item in 3" :key="item" :value="item">{{ item }}</option>
            </select>
          </el-form-item>
          <el-form-item>
            <el-button  type="primary" @click="submitForm">
              预定
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<style></style>
